<template>
  <div class="hello">
    <ul>
      <li>商品分类</li>
      <li id="liubai"></li>
      <li class="active" index="2">
        <router-link to="/Home">商城</router-link>
      </li>
      <li index="3">
        <router-link :to="{path:'/Goods',query:{list:'0'}}">全部商品</router-link>
      </li>
      <li index="4">
        <router-link :to="{path:'/Tenderhallhome',query:{k:0}}">首页</router-link>
      </li>
      <li index="5">
        <router-link :to="{path:'/Expertdatabase',query:{k:2}}">专家库</router-link>
      </li>
      <!--<li index="6"><router-link to="/Storelist">热销商品</router-link></li>-->
      <!--<li index="7"><router-link to="/Home">特价秒杀</router-link></li>-->
    </ul>
  </div>
</template>

<script>

  export default {
    data () {
      return {
        activeIndex: '1'
      }
    },
    methods: {
      handleSelect (key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello {
    width: 1200px;
    height: 46px;
    margin: 0 auto;
    background: #ff8328;
  }

  ul {
    width: 100%;
    height: 100%;
    line-height: 46px;

  }

  ul li {
    float: left;
   width:196px;
    height:100%;
    font-size: 18px;

  }

  ul li:nth-child(1) {
    /*padding: 0 62px;*/
    background: #ff7108;
  }

  ul li:nth-child(1):hover {
    background: #ff7108;
  }

  #liubai {
    width: 10px;
    height: 100%;
    background: #f1f1f1;
    padding: 0;
    margin: 0;
  }

  ul li a {
    display: inline-block;
    width:100%;
    height:100%;
    color: #ffffff;
  }

  ul li:hover {
    background: #ff7108;
    cursor: pointer;
  }

  .active {
    background: #ff7108;
  }
</style>


